// ignore_for_file: file_names
import 'package:flutter/material.dart';

class MyApp10 extends StatelessWidget {
  const MyApp10({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供数据
    const Map orderInfo = {
      "createTime": "2024-08-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯, 茶水分离杯耐热隔热玻璃杯, 茶水分离杯耐热隔热玻璃杯",
      "totalNum": 2,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml"
    };

    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('案例-商品订单详情'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: Container(
            width: double.infinity,
            height: 250,
            padding: const EdgeInsets.all(10),
            color: const Color.fromARGB(255, 240, 242, 243),
            child: Column(
              children: [
                // 1.2.1 第一层
                Row(
                  children: [
                    Text(orderInfo['createTime']),
                    const Spacer(),
                    Text(orderInfo['orderState'] == 2 ? '待收货' : '待付款',
                        style: TextStyle(
                            color: orderInfo['orderState'] == 2
                                ? Colors.red
                                : Colors.blue)),
                  ],
                ),
                // 1.2.2 第二层
                Padding(
                    padding: const EdgeInsets.only(top: 10),
                    child: Row(
                        // 侧轴方向起始位置对齐
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 左侧
                          const Image(
                              width: 100,
                              height: 100,
                              image: NetworkImage(
                                  'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg')),
                          // 右侧
                          Expanded(
                              child: Padding(
                                  padding: const EdgeInsets.only(left: 10),
                                  child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        // 商品名称 + 数量
                                        Row(
                                          children: [
                                            Expanded(
                                                child: Text(orderInfo['name'])),
                                            const Text('x2'),
                                          ],
                                        ),
                                        // 规格
                                        Padding(
                                          padding:
                                              const EdgeInsets.only(top: 5),
                                          child: Container(
                                            padding: const EdgeInsets.all(5),
                                            decoration: BoxDecoration(
                                                color: const Color.fromARGB(
                                                    255, 241, 202, 202),
                                                borderRadius:
                                                    BorderRadius.circular(5)),
                                            child: Text(
                                              orderInfo['attrsText'],
                                              maxLines: 1,
                                              style: const TextStyle(
                                                  color: Colors.red),
                                            ),
                                          ),
                                        ),
                                        // 价格
                                        Padding(
                                          padding:
                                              const EdgeInsets.only(top: 5),
                                          child:
                                              Text('¥${orderInfo['curPrice']}'),
                                        )
                                      ])))
                        ])),
                // 1.2.3 第三层
                // 合计, 右对齐
                Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: Row(
                    children: [
                      const Spacer(),
                      const Text('合计:'),
                      Text('¥${orderInfo['totalMoney']}'),
                    ],
                  ),
                ),
                // 1.2.4 第四层
                //两个按钮 确认收货, 取消订单
                Padding(
                    padding: const EdgeInsets.only(top: 10),
                    child: Row(children: [
                      const Spacer(),
                      ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.red),
                          child: const Text(
                            '确认收货',
                            style: TextStyle(color: Colors.white),
                          )),
                      const SizedBox(width: 10),
                      ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                              backgroundColor:
                                  const Color.fromARGB(255, 56, 8, 226)),
                          child: const Text('取消订单',
                              style: TextStyle(color: Colors.white))),
                    ]))
              ],
            )));
  }
}
